<template>
  <a-card size="small" :bordered="false" title="日志管理">
    <div class="table-operator">
      <a-form v-if="showSearch" layout="inline" :model="params" @submit="handleSearch">
        <a-form-item label="日志类型">
          <a-select v-model:value="params.logType" placeholder="请选择日志类型" allow-clear>
            <a-select-option v-for="item in LogTypeEnum.$options()" :key="item.value" :value="item.value">{{
              item.label
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="创建人">
          <a-input v-model:value="params.createBy" placeholder="请输入创建人" />
        </a-form-item>
        <a-form-item label="创建时间">
          <a-range-picker @ok="handleDateChoose" @change="handleDateChoose" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" :loading="tableLoading" html-type="submit">
            <template #icon><SearchOutlined /></template>
            <span v-if="!tableLoading">搜索</span>
            <span v-else>搜索中...</span>
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <table-toolbar
      v-model:show-search="showSearch"
      v-model:columns="tableColumns"
      style="margin-top: 10px"
      @reload="handleLoadData"
    >
      <template #left>
        <a-button type="primary" danger :disabled="!hasSelected" @click="handleDelToolbar">
          <template #icon><DeleteOutlined /></template>
          删除
        </a-button>
      </template>
    </table-toolbar>

    <a-table
      :loading="tableLoading"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange
      }"
      :columns="tableColumns"
      :data-source="tableDataSource"
      :pagination="pageInfo"
      row-key="logId"
      size="middle"
      @change="handlePageChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'logType'">
          <a-tag :color="record.logType.color">{{ record.logType.label }}</a-tag>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-button style="margin-right: 5px" type="primary" size="small" @click="handleShow(record)">
            <template #icon><EyeOutlined /></template>
            查看
          </a-button>
          <a-popconfirm title="确定删除吗?" ok-text="确定" cancel-text="取消" @confirm="handleDel(record.logId)">
            <a-button type="primary" danger size="small">
              <template #icon><DeleteOutlined /></template>
              删除
            </a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
    <log-detail ref="detailRef"></log-detail>
  </a-card>
</template>

<script name="SystemLogIndex" lang="ts" setup>
import type { Dayjs } from "dayjs";
import { delLog, getPage } from "@/api/system/log";
import { LogTypeEnum } from "@/enums/system";
import { isNull } from "lodash-es";
import { getTimestampDayBegin } from "@/utils/time";
import LogDetail from "./detail.vue";

const showSearch = ref<boolean>(true);
const params = reactive<any>({
  title: "",
  logType: undefined,
  createBy: "",
  startCreateTime: undefined,
  endCreateTime: undefined
});
const handleDateChoose = (dates: [Dayjs, Dayjs]) => {
  if (!isNull(dates)) {
    params.startCreateTime = getTimestampDayBegin(dates[0]);
    params.endCreateTime = getTimestampDayBegin(dates[1]);
  }
};

const tableColumns = ref<TableColumn[]>([
  {
    key: "logId",
    dataIndex: "logId",
    title: "日志ID",
    visible: false
  },
  {
    key: "title",
    dataIndex: "title",
    title: "日志标题"
  },
  {
    key: "logType",
    dataIndex: "logType",
    title: "日志类型"
  },
  {
    key: "createBy",
    dataIndex: "createBy",
    title: "创建人"
  },
  {
    key: "remoteAddr",
    dataIndex: "remoteAddr",
    title: "操作ip地址"
  },
  {
    key: "userAgent",
    dataIndex: "userAgent",
    title: "用户代理",
    visible: false
  },
  {
    key: "requestUri",
    dataIndex: "requestUri",
    title: "请求uri",
    visible: false
  },
  {
    key: "method",
    dataIndex: "method",
    title: "操作方式",
    visible: false
  },
  {
    key: "params",
    dataIndex: "params",
    title: "数据",
    visible: false
  },
  {
    key: "time",
    dataIndex: "time",
    title: "方法执行时间",
    visible: false
  },
  {
    key: "exception",
    dataIndex: "exception",
    title: "异常信息",
    visible: false
  },
  {
    key: "createTime",
    dataIndex: "createTime",
    title: "创建时间"
  },
  {
    key: "action",
    title: "操作",
    fixed: "right"
  }
]);
const { tableLoading, pageInfo, tableDataSource, handleLoadData, handlePageChange, handleSearch } = useTablePage(
  params,
  getPage
);
const { selectedRowKeys, hasSelected, hasSelectOne, onSelectChange } = useTableSelect();

const detailRef = ref();
const handleShow = (detail: any) => {
  detailRef.value.show(detail);
};
const handleDel = (id: number) => {
  tableLoading.value = true;
  delLog(id)
    .then(() => {
      handleLoadData();
      antdMessage.success("删除成功");
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
const handleDelToolbar = () => {
  antdModal.confirm({
    title: "警告",
    icon: createVNode(ExclamationCircleOutlined),
    content: "你确定要删除选中的日志吗?",
    onOk() {
      tableLoading.value = true;
      delLog(selectedRowKeys.value)
        .then(() => {
          handleLoadData();
          antdMessage.success("删除成功");
        })
        .finally(() => {
          tableLoading.value = false;
        });
    }
  });
};
onMounted(() => {
  handleLoadData();
});
</script>
